<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>健康管理</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        #big {
            width: 100%;
            height: 1000px;
            background-image: url(images/banner.jpg);
            background-repeat: no-repeat;
        }
        
        .t1 {
            width: 300px;
            height: 300px;
            position: relative;
            top: 150px;
            border-radius: 50%;
        }
        
        .t2 {
            width: 300px;
            height: 300px;
            position: relative;
            top: 150px;
            border-radius: 50%;
        }
        
        #aa {
            width: 100%;
            height: 750px;
            border: 1px solid rgb(180, 174, 174);
        }
        
        #lunbo {
            width: 100%;
            height: 800px;
            background-image: url("images/banner.jpg");
            background-size: 100%;
            background-repeat: no-repeat;
            margin: 0 auto;
        }
        
        #lunbo li {
            width: 20px;
            height: 20px;
            background-color: whitesmoke;
            margin-right: 40px;
            float: left;
            position: relative;
            left: 300px;
            top: 570px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="aa">
        <div id="lunbo">
            <ul>
                <li id="a">1</li>
                <li id="b">2</li>
                <!-- <li id="c">3</li> -->
            </ul>
            <script>
                window.onload = function() {
                    document.getElementById('a').onmouseover = function() {
                        document.getElementsByTagName('div')[0].style.backgroundImage = "url('images/banner.jpg')"
                    }
                    document.getElementById('b').onmouseover = function() {
                            document.getElementsByTagName('div')[0].style.backgroundImage = "url('images/banner-3.jpg')"
                        }
                        // document.getElementById('c').onmouseover = function(){
                        //     document.getElementsByTagName('div')[0].style.backgroundImage = "url('images/03.jpg')"
                        // }
                    var arr = ["url('images/banner.jpg')", "url('images/banner-3.jpg')"]
                    var index = 0
                    setInterval(function() {
                        index++
                        if (index > 2) {
                            index = 1;
                        }
                        document.getElementById('lunbo').style.backgroundImage = arr[index]
                    }, 3000)
                }
            </script>
        </div>
        <img src="images/01.jpg" alt="" class="t1">
    </div>
    <img src="images/02.jpg" alt="" class="t2">
    </div>
    <div></div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>

</html>